<template>
  <g class="score" fill="#fff">
    <defs>
      <g id="score-0">
        <rect x="1" y="0" width="2" height="1" />
        <rect x="1" y="6" width="2" height="1" />
        <rect x="0" y="1" width="1" height="5" />
        <rect x="3" y="1" width="1" height="5" />
      </g>
      <g id="score-1" transform="translate(1, 4)">
        <rect x="1" y="1" width="1" height="1" />
        <rect x="1" y="6" width="3" height="1" />
        <rect x="2" y="0" width="1" height="7" />
      </g>
      <g id="score-2" transform="translate(1, 4)">
        <rect x="0" y="1" width="1" height="1" />
        <rect x="1" y="0" width="2" height="1" />
        <rect x="3" y="1" width="1" height="2" />
        <rect x="2" y="3" width="1" height="1" />
        <rect x="1" y="4" width="1" height="1" />
        <rect x="0" y="5" width="1" height="1" />
        <rect x="0" y="6" width="4" height="1" />
      </g>
      <g id="score-3">
        <path d="M1,5 h1 v-1 h2 v1 h1 v2 h-1 v1 h1 v2 h-1 v1 h-2 v-1 h-1 v-1 h1 v1 h2 v-2 h-2 v-1 h2 v-2 h-2 v1 h-1 v-1" />
      </g>
      <g id="score-4">
        <path d="M2,6 v-1 h1 v-1 h1 v4 h-1 v-2 h-1 v2 h3 v1 h-1 v2 h-1 v-2 h-2 v-3 h1" />
      </g>
      <g id="score-5">
        <path d="M1,4 h4 v1 h-3 v1 h2 v1 h1 v3 h-1 v1 h-2 v-1 h-1 v-1 h1 v1 h2 v-3 h-3 v-3" />
      </g>
    </defs>
    <g>
      <use :xlink:href="`#score-${props.score / 100}`" />
      <use xlink:href="#score-0" x="6" y="4" />
      <use xlink:href="#score-0" x="11" y="4" />
    </g>
  </g>
</template>

<script setup>
  const props = defineProps({
    score: {
        validator(value, props) {
        return [100, 200, 300, 400, 500].includes(value)
      }
    }
  })
</script>

<style lang="scss" scoped>

</style>